﻿@{
    Layout = null;
}
<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<link href="~/libs/layui-v2.5.6/layui/treetable-lay/treetable.css" rel="stylesheet" />

<table class="layui-hide" id="table"></table>
<script type="text/html" id="TPL-treeTable-demo-tools">
    <div class="layui-btn-container">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="insert"
        >新增</a
      >
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update"
        >编辑</a
      >
      <a class="layui-btn layui-btn-success layui-btn-xs" lay-event="delete"
        >删除</a
      >
    </div>
</script>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="~/libs/layui-v2.5.6/layui/treetable-lay/treetable.js"></script>
<script>
    layui.use(['layer', 'table', 'treetable'],function () {
      var treeTable = layui.treeTable;
      var layer = layui.layer;
      //layui.form.render('')
      var inst = treeTable.render({});

      // 渲染
      function Get (){
         inst = treeTable.render({
         treeColIndex: 1,
         treeSpid: 0,
         treeIdName: 'id',
         treePidName: 'parentId',
         treeDefaultClose: true,
         treeLinkage: false,
         elem: '#table',
         url: '/MaterialType/GetMaterialType', // 此处为静态模拟数据，实际使用时需换成真实接口
         maxHeight: '800px',
         toolbar: '#TPL-treeTable-demo',
         cols: [
           [
             { field: 'materialTypeName', title: '物料类型名称', width: 400,
                templet: function(d) {
                // 根据展开状态返回不同的图标
                console.log(d)
                var icon = d.spread ? '<i class="layui-icon layui-icon-triangle-down"></i>' : '<i class="layui-icon layui-icon-triangle-right"></i>';
                return icon + d.materialTypeName; // 拼接图标和文本
            }  },
             { field: 'products', title: '产品列表', width: 400 },
             {
                 field: 'state', title: '是否启用', width: 300,
                 templet: function (d) {
                     return d.state ?"是":"否"
                 }
             },
             {
               fixed: 'right',
               title: '操作',
               align: 'center',
               toolbar: '#TPL-treeTable-demo-tools',
             },
           ],
         ],
       });
      }

      treeTable.expandAll('ID-treeTable-demo', true); // 关闭全部节点

      Get()

      // 单元格工具事件
      treeTable.on('tool(' + inst.config.id + ')', function (obj) {
        var layEvent = obj.event; // 获得 lay-event 对应的值
        var trElem = obj.tr;
        var trData = obj.data;
        var tableId = obj.config.id;
        if (layEvent === 'insert') {
          layer.open({
            type: 2,
            title: '新增',
            shadeClose: true,
            maxmin: true,
            area: ['900px', '600px'],
            content: '/MaterialType/InsterView?id=0&pid='+trData.id,
          });
        }
        else if (layEvent === 'update') {
          layer.open({
            type: 2,
            title: '编辑',
            shadeClose: true,
            maxmin: true,
            area: ['900px', '600px'],
            content: '/MaterialType/UpdateView?id='+trData.id+'&pid='+trData.parentId,
          });
        }
        else if (layEvent === 'delete') {
            if(trData.children.length==0){
                layer.confirm('真的要删除吗', function (index) {
                   Delete(trData.id)
                })
            }
            else{
                layer.msg('有下级无法删除', {icon: 0})
            }
        }
      });

     function Delete(id) {
        $.ajax({
            url: '/MaterialType/MaterialTypeDelete',
            data: { id: id },
            type: 'get',
            dataType: 'json',
            success: function(rea) {
                if (rea > 0) {
                    layer.msg('删除成功', { icon: 1 });
                    location.href = '/MaterialType/GetMaterialTypeView'
                } else {
                    layer.msg('删除失败', { icon: 0 });
                }
            }
        });
     }
    });
</script>


